<template>
  <main>
    <div class="box">
      <div class="inner-box">
        <div class="forms-wrap">
          <form action="index.html" autocomplete="off" class="sign-in-form">
            <div class="logo">
              <img src="../assets/images/login-logo.png" alt="芸窗" />
              <h4
                style="font-family: ChongXiSmallSeal; color: var(--jiqiu-color)"
              >
                芸窗
              </h4>
            </div>

            <div class="heading">
              <h2>欢迎回来！</h2>
              <h6>没有注册？</h6>
              <a class="toggle">马上注册</a>
            </div>

            <div class="actual-form">
              <div class="input-wrap">
                <input
                  type="text"
                  minlength="4"
                  class="input-field"
                  autocomplete="off"
                  required
                />
                <label>姓名</label>
              </div>

              <div class="input-wrap">
                <input
                  type="password"
                  minlength="4"
                  class="input-field"
                  autocomplete="off"
                  required
                />
                <label>密码</label>
              </div>

              <input type="submit" value="登录" class="sign-btn" />

              <p class="text">
                忘记了你的密码?
                <a @click="getHelp()">获得帮助</a>
              </p>
            </div>
          </form>

          <form action="index.html" autocomplete="off" class="sign-up-form">
            <div class="logo">
              <img src="../assets/images/login-logo.png" alt="easyclass" />
              <h4
                style="font-family: ChongXiSmallSeal; color: var(--jiqiu-color)"
              >
                芸窗
              </h4>
            </div>

            <div class="heading">
              <h2>开启芸窗之旅</h2>
              <h6>已有账户？</h6>
              <a class="toggle">登录</a>
            </div>

            <div class="actual-form">
              <div class="input-wrap">
                <input
                  type="text"
                  minlength="6"
                  maxlength="15"
                  class="input-field"
                  autocomplete="off"
                  required
                  v-model="registerData.username"
                />
                <label>用户名</label>
              </div>

              <div class="input-wrap">
                <input
                  type="password"
                  minlength="5"
                  maxlength="10"
                  class="input-field"
                  autocomplete="off"
                  required
                  v-model="registerData.rePassword"
                />
                <label>密码</label>
              </div>
              <div class="input-wrap">
                <input
                  type="password"
                  minlength="5"
                  maxlength="10"
                  class="input-field"
                  autocomplete="off"
                  required
                  v-model="registerData.rePassword"
                />
                <label>请重复您的密码</label>
              </div>
              <input
                type="submit"
                value="注册"
                class="sign-btn"
                @click="register"
              />

              <p class="text">
                通过注册，我同意
                <a data-bs-toggle="modal" data-bs-target="#serviceTermsModal"
                  >服务条款</a
                >
                和
                <a data-bs-toggle="modal" data-bs-target="#privacyPolicy"
                  >隐私政策</a
                >
              </p>
            </div>
          </form>
        </div>
        <div class="carousel">
          <div class="images-wrapper">
            <img
              src="../assets/images/login-image1.png"
              class="image img-1 show"
              alt=""
            />
            <img
              src="../assets/images/login-image2.png"
              class="image img-2"
              alt=""
            />
            <img
              src="../assets/images/login-image3.png"
              class="image img-3"
              alt=""
            />
          </div>

          <div class="text-slider">
            <div class="text-wrap">
              <div class="text-group">
                <h2>创建你的期刊</h2>
                <h2>按照你自己的想法</h2>
                <h2>欢迎加入芸窗！</h2>
              </div>
            </div>

            <div class="bullets">
              <span class="active" data-value="1"></span>
              <span data-value="2"></span>
              <span data-value="3"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <!-- 服务条款模态框 -->
  <div
    class="modal fade"
    id="serviceTermsModal"
    tabindex="-1"
    aria-labelledby="serviceTermsModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="serviceTermsModalLabel">服务条款</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="关闭"
          ></button>
        </div>
        <div class="modal-body">
          <h5>用户协议</h5>
          <p>
            本协议由用户与“芸窗”期刊采编系统的所有者共同签订。用户在使用本系统之前，请仔细阅读并接受本协议所有条款。
          </p>
          <h5 class="mt-4">权利与义务</h5>
          <p>
            1.用户有权在遵守本协议的基础上使用“芸窗”期刊采编系统的各项服务。
          </p>
          <p>
            2.用户必须确保提供的信息真实有效，并对因信息不准确造成的后果负责。
          </p>
          <p>3.用户不得利用本系统从事任何非法活动。</p>
          <h5 class="mt-4">免责声明</h5>
          <p>1.“芸窗”期刊采编系统不对因不可抗力导致的服务中断承担责任。</p>
          <p>2.用户应自行承担使用本系统过程中可能产生的风险。</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 隐私政策模态框 -->
  <div
    class="modal fade"
    id="privacyPolicy"
    tabindex="-1"
    aria-labelledby="serviceTermsModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="serviceTermsModalLabel">隐私政策</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="关闭"
          ></button>
        </div>
        <div class="modal-body">
          <h5>收集信息的方式</h5>
          <p>
            我们会在您注册账户时收集您的基本信息，包括但不限于姓名、联系方式等。
            当您使用我们的服务时，我们会收集必要的信息，以便为您提供更好的服务体验。
          </p>
          <h5 class="mt-4">信息使用</h5>
          <p>1.我们使用收集的信息来改善我们的产品和服务。</p>
          <p>
            2.我们可能会使用您的信息与您联系，提供关于产品更新或重要通知的信息。
          </p>

          <h5 class="mt-4">信息共享</h5>
          <p>
            1.我们不会向第三方出售、出租或公开您的个人信息，除非得到您的许可或法律要求。
          </p>
          <p>
            2.我们可能会与合作伙伴共享必要的信息，以提供特定服务，但这些信息将受到严格保密。
          </p>
          <h5 class="mt-4">法律适用</h5>
          <p>本隐私政策的解释和执行均适用中华人民共和国法律。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
// 导入爱心动画
import "@/assets/javascript/HeartAnimation.js";
onMounted(() => {
  const inputs = document.querySelectorAll(".input-field");
  const toggle_btn = document.querySelectorAll(".toggle");
  const main = document.querySelector("main");
  const bullets = document.querySelectorAll(".bullets span");
  const images = document.querySelectorAll(".image");

  inputs.forEach((inp) => {
    inp.addEventListener("focus", () => {
      inp.classList.add("active");
    });
    inp.addEventListener("blur", () => {
      if (inp.value != "") return;
      inp.classList.remove("active");
    });
  });

  toggle_btn.forEach((btn) => {
    btn.addEventListener("click", () => {
      main.classList.toggle("sign-up-mode");
    });
  });

  function moveSlider() {
    let index = this.dataset.value;

    let currentImage = document.querySelector(`.img-${index}`);
    images.forEach((img) => img.classList.remove("show"));
    currentImage.classList.add("show");

    const textSlider = document.querySelector(".text-group");
    textSlider.style.transform = `translateY(${-(index - 1) * 2.2}rem)`;

    bullets.forEach((bull) => bull.classList.remove("active"));
    this.classList.add("active");
  }

  bullets.forEach((bullet) => {
    bullet.addEventListener("click", moveSlider);
  });
});

// 获得帮助
import { ElMessageBox, ElMessage } from "element-plus";

const getHelp = () => {
  ElMessageBox.alert("如有疑问请联系季秋：jiqiu1921@163.com", "帮助");
};

//用于注册的数据模型
const registerData = ref({
  username: "",
  password: "",
  rePassword: "",
});
import { registerService } from "@/api/user.js";
//用于注册的事件函数
const register = async () => {
  let result = await registerService(registerData.value);
  ElMessage.success(result.message ? result.message : "注册成功");
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body,
input {
  font-family: "Poppins", sans-serif;
}

main {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  position: relative;
  width: 100%;
  max-width: 1020px;
  height: 640px;
  background-color: #fff;
  border-radius: 3.3rem;
  box-shadow: 0 60px 40px -30px rgba(0, 0, 0, 0.27);
}

.inner-box {
  position: absolute;
  width: calc(100% - 4.1rem);
  height: calc(100% - 4.1rem);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.forms-wrap {
  position: absolute;
  height: 100%;
  width: 45%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  transition: 0.8s ease-in-out;
}

form {
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  transition: opacity 0.02s 0.4s;
}

form.sign-up-form {
  opacity: 0;
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logo img {
  width: 27px;
  margin-right: 0.3rem;
}

.logo h4 {
  font-size: 1.5rem;
  margin-top: -1px;
  letter-spacing: -0.5px;
  color: #151111;
}

.heading h2 {
  font-size: 2.1rem;
  font-weight: 600;
  color: #151111;
}

.heading h6 {
  color: #bababa;
  font-weight: 400;
  font-size: 0.75rem;
  display: inline;
}

.toggle {
  color: #151111;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: 0.3s;
  cursor: pointer;
}

.toggle:hover {
  color: var(--jiqiu-color);
}

.input-wrap {
  position: relative;
  height: 37px;
  margin-bottom: 2rem;
}

.input-field {
  position: absolute;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  border-bottom: 1px solid #bbb;
  padding: 0;
  font-size: 0.95rem;
  color: #151111;
  transition: 0.4s;
}

label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: #bbb;
  pointer-events: none;
  transition: 0.4s;
}

.input-field.active {
  border-bottom-color: #151111;
}

.input-field.active + label {
  font-size: 0.75rem;
  top: -2px;
}

.sign-btn {
  display: inline-block;
  width: 100%;
  height: 43px;
  background-color: #151111;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 0.8rem;
  font-size: 0.8rem;
  margin-bottom: 2rem;
  transition: background-image 0.5s ease;
}

.sign-btn:hover {
  background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
  transition: background-image 0.5s ease;
}

.text {
  color: #bbb;
  font-size: 0.7rem;
}

.text a {
  color: var(--jiqiu-color) !important;
  text-decoration: underline !important;
  transition: 0.3s;
  cursor: pointer;
}

.text a:hover {
  color: var(--jiqiu-color);
}

main.sign-up-mode form.sign-in-form {
  opacity: 0;
  pointer-events: none;
}

main.sign-up-mode form.sign-up-form {
  opacity: 1;
  pointer-events: all;
}

main.sign-up-mode .forms-wrap {
  left: 55%;
}

main.sign-up-mode .carousel {
  left: 0%;
}

.carousel {
  position: absolute;
  height: 100%;
  width: 55%;
  left: 45%;
  top: 0;
  background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
  border-radius: 2rem;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-bottom: 2rem;
  overflow: hidden;
  transition: 0.8s ease-in-out;
}

.images-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.image {
  width: 100%;
  grid-column: 1/2;
  grid-row: 1/2;
  opacity: 0;
  transition: opacity 0.3s, transform 0.5s;
}

.img-1 {
  transform: translate(0, -50px);
}

.img-2 {
  transform: scale(0.4, 0.5);
}

.img-3 {
  transform: scale(0.3) rotate(-20deg);
}

.image.show {
  opacity: 1;
  transform: none;
}

.text-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.text-wrap {
  max-height: 2.2rem;
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.text-group {
  display: flex;
  flex-direction: column;
  text-align: center;
  transform: translateY(0);
  transition: 0.5s;
}

.text-group h2 {
  line-height: 2.2rem;
  font-weight: 600;
  font-size: 1.6rem;
}

.bullets {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bullets span {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #aaa;
  margin: 0 0.25rem;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.bullets span.active {
  width: 1.1rem;
  background-color: #151111;
  border-radius: 1rem;
}

@media (max-width: 850px) {
  .box {
    height: auto;
    max-width: 550px;
    overflow: hidden;
  }

  .inner-box {
    position: static;
    transform: none;
    width: revert;
    height: revert;
    padding: 2rem;
  }

  .forms-wrap {
    position: revert;
    width: 100%;
    height: auto;
  }

  form {
    max-width: revert;
    padding: 1.5rem 2.5rem 2rem;
    transition: transform 0.8s ease-in-out, opacity 0.45s linear;
  }

  .heading {
    margin: 2rem 0;
  }

  form.sign-up-form {
    transform: translateX(100%);
  }

  main.sign-up-mode form.sign-in-form {
    transform: translateX(-100%);
  }

  main.sign-up-mode form.sign-up-form {
    transform: translateX(0%);
  }

  .carousel {
    position: revert;
    height: auto;
    width: 100%;
    padding: 3rem 2rem;
    display: flex;
  }

  .images-wrapper {
    display: none;
  }

  .text-slider {
    width: 100%;
  }
}

@media (max-width: 530px) {
  main {
    padding: 1rem;
  }

  .box {
    border-radius: 2rem;
  }

  .inner-box {
    padding: 1rem;
  }

  .carousel {
    padding: 1.5rem 1rem;
    border-radius: 1.6rem;
  }

  .text-wrap {
    margin-bottom: 1rem;
  }

  .text-group h2 {
    font-size: 1.2rem;
  }

  form {
    padding: 1rem 2rem 1.5rem;
  }
}
</style>
